<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>纯css3优惠券效果</title>

    <!--分页插件-->
    <script src="/after/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/after/js/layer/layer.js" charset="utf-8"></script>
    <link href="/after/js/laypage/skin/laypage.css" rel="stylesheet">
    <!--引用vue的js-->
    <script src="/after/js/vue/vue.min.js"></script>

    <script src="/after/js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="/after/js/bootstrap.min.js?v=3.4.0" type="text/javascript"></script>
    <script type="text/javascript" src="/after/js/Globals.js"></script>
    <script type="text/javascript" src="/after/js/websocket.js"></script>
    <script type="text/javascript" src="/after/js/vue/vue.min.js"></script>
    <script src="/after/js/layer/layer.js" charset="utf-8"></script>
    <style>
        /*优惠券样式*/
        .stamp * {
            padding: 0;
            margin: 0;
            list-style: none;
            font-family: "Microsoft YaHei", 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
        }

        .stamp {
            width: 180px;
            height: 90px;
            padding: 0 10px;
            margin-bottom: 50px;
            position: relative;
            overflow: hidden;
        }

        .stamp:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 10px;
            right: 10px;
            z-index: -1;
        }

        .stamp i {
            position: absolute;
            left: 20%;
            top: 45px;
            height: 190px;
            width: 390px;
            background-color: rgba(255, 255, 255, .15);
            transform: rotate(-30deg);
        }

        .stamp .par {
            float: left;
            padding: 2px 5px;
            width: 70px;
            border-right: 2px dashed rgba(255, 255, 255, .3);
            text-align: left;
        }

        .stamp .par p {
            color: #fff;
            font-size: 3px;
            line-height: 55px;
        }

        .stamp .par span {
            font-size: 35px;
            color: #fff;
            margin-right: 3px;
            line-height: 35px;
        }

        .stamp .par .sign {
            font-size: 25px;
        }

        .stamp .par sub {
            position: relative;
            top: 10px;
            color: rgba(255, 255, 255, .8);
        }

        .stamp .copy {
            display: inline-block;
            padding: 5px 5px;
            width: 70px;
            vertical-align: text-bottom;
            font-size: 5px;
            color: rgb(255, 255, 255);
            text-align: center;
            line-height: initial;
        }

        .stamp .copy p {
            font-size: 1px;
            margin-top: 5px;
        }

        .stamp02 {
            background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);
            background-size: 15px 15px;
            background-position: 9px 3px;
        }

        .stamp02:before {
            background-color: #D24161;
        }

        .stamp02 .copy a {
            background-color: #fff;
            color: #333;
            font-size: 10px;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 3px;
            display: block;
        }

        .stamp022 {
            background: radial-gradient(transparent 0, transparent 5px, grey 5px);
            background-size: 15px 15px;
            background-position: 9px 3px;
        }

        .stamp022:before {
            background-color: grey;
        }

        .stamp022 .copy a {
            background-color: #fff;
            color: #333;
            font-size: 10px;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 3px;
            display: block;
        }
    </style>
</head>
<body>
<#list discountlist as dis>

<!--可领取的样式-->
<div class="demo" style="float: left;margin-left: 25px;">
    <div class="stamp stamp02">
        <div class="par"><sub class="sign">￥</sub><span>${dis.money}</span>
            <p>订单满${dis.conditio}元</p></div>
        <div class="copy">副券<p>${dis.startTime?string("yyyy-MM-dd")}<br>${dis.endTime?string("yyyy-MM-dd")}</p>
            <a href="/czgIndexTop/insertCd.do?activeId=${dis.id}&customId=${NowCustom.id}" onclick="mydj()">立即领取</a>
            <input type="hidden" value="${NowCustom.id}" id="cid">
            <input type="hidden" value="${dis.id}" name="disId">
        </div>
    </div>
</div>

<!--已领取过的样式&ndash;&gt;-->
<!--<div class="demo" style="float: left;margin-left: 25px;">-->
<#--<div class="stamp stamp022">-->
<#--<div class="par"><sub class="sign">￥</sub><span>${dis.money}</span>-->
<#--<p>订单满${dis.conditio}元</p></div>-->
<#--<div class="copy">副券<p>${dis.startTime?string("yyyy-MM-dd")}<br>${dis.endTime?string("yyyy-MM-dd")}</p>-->
<#--</div>-->
<#--</div>-->
<#--</div>-->
</#list>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            result: []
        }
    });


    if ("${NowCustom}" == "" || "${NowCustom}" == null) {
        alert("请先登录后，再领取优惠券");
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    var getTwoId = function () {
        var custom_id = $("#cid").val();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/czgIndexTop/OldDiscount.do",
            data: {
                custom_id: custom_id
            },
            success: function (msg) {
                $("input[name=disId]").each(function () {
                    for (i = 0; i < msg.idList.length; i++) {
                        if ($(this).val() == msg.idList[i]) {
                            $(this).parent().parent().removeClass("stamp02");
                            $(this).parent().parent().addClass("stamp022");
                            $(this).prev().prev().css("display", "none");
                        }
                    }


                })

                app.result = msg.idList;
                console.log(app.result);
            }, error: function () {
            }
        });
    }
    getTwoId();

    function mydj() {
        alert("领取成功")
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }


</script>